<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="2">
        <div> <el-button @click="dialogVisible = true" icon="el-icon-edit" type="primary">写建议</el-button></div>
      </el-col>
      <el-col :span="18">
        <div
          style="border-radius: 4px;height: 50px;width: 700px;line-height: 50px; margin-bottom: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <div style="margin-left: 10px;">常见的建议：</div>
        </div>
        <div
          style="border-radius: 4px;height: 100%;width: 700px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <div v-for="(item, index) in generateRandomFeedbacks(9)" :key="index"
            style="margin: 10px; padding-top: 5px; ">
            <div
              style="height: 40px; line-height: 40px;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              {{ item.feedback }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>

    <el-dialog title="反馈建议" :visible.sync="dialogVisible">
      <div class="form_box">
        <el-form ref="form" :model="feedbackForm" label-width="80px">
          <el-form-item label="反馈标题">
            <el-input v-model="feedbackForm.title" placeholder="请输入反馈标题"></el-input>
          </el-form-item>
          <el-form-item label="反馈内容">
            <el-input type="textarea" :rows="5" v-model="feedbackForm.content" placeholder="请输入90字内的反馈内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { feedbackService } from '@/api/front/common';
import { message, messageType } from '@/utils/message';
export default {
  name: "FrontActivity",
  data() {
    return {
      houseList: [],
      pageNum: 1,
      pageSize: 8,
      total: 0,
      feedbackForm: {
        activityId:null,
        title: null,
        content: null,
      },
      dialogVisible: false,
    }
  },
  created() {
    this.userActivityTypeActions()
  },
  computed: {
    ...mapState('userActivity', ['activityType']),
  },
  methods: {
    ...mapActions('userActivity', ['userActivityTypeActions']),
    async handleSubmit() {
      await feedbackService(this.feedbackForm).then(resp => {
        if (!resp) return;
        message(messageType().success, '提交成功');
      }, error => {
        console.log(error);
      })
      this.dialogVisible = false;
    },
    handleCurrentChange(pageNum) {
      // this.load(pageNum)
      console.log(pageNum);
    },
    generateRandomFeedbacks(count) {
      const feedbackPhrases = [
        '这个应用真的很好用，但是我希望增加更多功能',
        '界面设计很简洁，但是有时候加载速度有点慢。',
        '非常喜欢这个应用，希望继续保持更新！',
        '用户体验非常好，但是有些功能我还不太会用',
        '功能很全面，但是希望能有更好的用户指导。',
        '希望应用能有更多的个性化设置。',
        '应用的稳定性很好，没有遇到过崩溃。',
        '有时候应用的某些功能不够直观。',
        '整体来说，我对这款应用非常满意。'
      ];

      const randomFeedbacks = [];
      for (let i = 0; i < count; i++) {
        const randomIndex = Math.floor(Math.random() * feedbackPhrases.length);
        const feedbackContent = feedbackPhrases[randomIndex];
        randomFeedbacks.push({
          feedback: feedbackContent,
        });
      }
      return randomFeedbacks;
    }
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 36px;
}

.bg-purple {
  background: #F6F6F6;
}
</style>